<template>
  <div>
    <el-form ref="pram" :model="pram" :rules="rules" label-width="120px" @submit.native.prevent>
      <template v-if="isCreate === 0">
        <el-form-item label="选择年度：">
          <el-select v-model="year" placeholder="年度" style="width: 100%">
            <el-option
              v-for="(item,index) in yearList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-download" size="mini" type="primary"
                     @click="getMuBan('/全年任务计划.xlsx', '全年任务计划')" style="margin-left:0;">模板下载
          </el-button>
          <el-upload class="upload-demo" style="display:inline-block!important;" action
                     accept="application/xls,application/xlsx" :before-upload="onBeforeUpload"
                     :http-request="handleUploadForm2"
                     :headers="myHeaders" :show-file-list="false">
            <el-button icon="el-icon-upload2" size="mini" type="primary" v-hasPermi="['admin:person:import']" style="margin-left:0;">导入
            </el-button>
          </el-upload>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </template>
      <template v-if="isCreate === 1">
        <el-form-item label="完成情况：" prop="completionStatus">
          <el-select v-model="pram.completionStatus" placeholder="请选择">
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="完成详情：" prop="completionText">
          <el-input v-model="pram.completionText" type="textarea" :rows="5" placeholder="完成详情"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlerSubmit('pram')">更新</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import * as roleApi from '@/api/role.js'
import * as taskApi from '@/api/task.js'
import { Debounce } from '@/utils/validate'
import { yearAdd, yearImport } from '@/api/task.js'
import * as personApi from '@/api/person'
import { param } from '@/utils'
import { getToken } from '@/utils/auth'
import { exportTest } from '@/utils/utils'

export default {
  // name: "edit"
  components: {},
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    },
    allTreeList: {
      type: Array
    },
    allCategoryData: {
      type: Object
    }
  },
  data() {
    return {
      myHeaders: { 'X-Token': getToken() },
      constants: this.$constants,
      pram: {
        id: null,
        completionStatus: '',
        completionText: ''
      },
      rules: {
        completionStatus: [{ required: true, message: '请选择完成情况', trigger: ['blur', 'change'] }]
      },
      categoryData: {
        modelTypeList: [],
        personList: []
      },
      yearList: [],
      year: null,
      parentOptions: [],
      statusList: [{ id: 1, name: '未开始' }, { id: 2, name: '进行中' }, { id: 3, name: '已完成' }],
      categoryProps: {
        value: 'id',
        label: 'name',
        children: 'child',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath: false,
        multiple: true
      }
    }
  },
  mounted() {
    this.initYearList()
    this.initEditData()
  },
  methods: {
    getMuBan(url, fileName) {
      exportTest(url, fileName)
    },
    onBeforeUpload(file) {
      const isEXCEL = file.type === 'application/xls' || 'application/x-xls' || 'application/zip' || 'application/rar'
      const isLt1M = file.size / 1024 / 1024 < 100

      if (!isEXCEL) {
        this.$message.error('上传文件只能是EXCEL格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 100MB!')
      }
      return isEXCEL && isLt1M
    },
    initYearList() {
      let date = new Date()
      let year = date.getFullYear()
      console.log(year)
      for (let i = 0; i < 10; i++) {
        this.yearList.push(year - i)
      }
      this.year = year
      console.log(this.year)
    },
    close() {
      this.$emit('hideEditDialog')
    },
    onchangeTime(e) {
      this.pram.taskTime = e
    },
    initEditData() {
      if (this.isCreate !== 1) return //编辑
      const { completionStatus, completionText } = this.editData //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
      this.pram.completionStatus = completionStatus
      this.pram.completionText = completionText
    },
    handlerSubmit: Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (this.isCreate === 0) {
          this.handlerSave()
        } else {
          this.handlerEdit()
        }
      })
    }),
    handleUploadForm2(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('year', this.year)
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      taskApi.yearImport(formData)
        .then((res) => {
          let msg = ''
          if (res) {
            msg = res
            this.$message.error(msg)
          } else {
            msg = '信息导入成功'
            this.$message.success(msg)
          }
          loading.close()
          this.$emit('hideEditDialog')
        })
        .catch((res) => {
          loading.close()
        })
    },
    handlerSave() {
      console.log(11)
    },
    handlerEdit() {
      this.pram.id = this.editData.id
      taskApi.yearAdd(this.pram).then(data => {
        this.$message.success('更新成功')
        this.$emit('hideEditDialog')
      })
    }
  }
}
</script>

<style scoped>

</style>
